<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>第一个Vue案例</title>
    <!-- 开发环境版本 -->
    <script src="./js/vue-2.5.16.js"></script>
    <style>
        #app {
            font-size: 24px;
            color: blueviolet;
        }
        .name span {
            display: inline-block;
            padding: 10px;
            margin: 10px;
            border: 1px solid #ccc;
            color: rgb(23, 22, 22);
            border-radius: 10px;
            background-color: rgb(235,231,231);
        }
        .input01{
            width: 60px;
            height: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Vue案例</h1>
    <div id="app">
        {{ message }}
        <br> <br>
        <a v-bind:href="baidu_url" target="_blank"> 百 度 </a>
        <br> <br>
        <a :href="tengxun_url" target="_blank"> 腾 讯 </a>
        
        

        <hr>
        <!-- if条件渲染 -->

        <!-- v-if 的使用 -->
        <p v-if="seen">你能看见我吗？ v-if </p>

        <!-- v-if 和 v-else 的使用 -->
        <p v-if="isLogin">个人中心</p>
        <p v-else>登录</p>


        <!-- v-if,v-else-if和v-else -->
        <P>
            成绩：
            <span v-if="level === 1">优秀</span>
            <span v-else-if="level === 2">良</span>
            <span v-else-if="level === 3">中</span>
            <span v-else>差</span>
        </P>

        <hr>

        <!-- v-show -->
         <!-- 制作元素样式的显示和隐藏，元素一直是存在的 -->
        <p v-show='isShow'>你能看见我吗? v-show</p>


        <!-- for列表渲染 -->
        <p class="name">
            <span v-for="(name, index) in names">
                {{ index + 1 }} - {{ name }}
            </span>
        </p>
        <p v-for="student in students">
            姓名：{{ student.name }},
            性别：{{ student.sex }},
            年龄：{{ student.age }}

        </p>

        <hr>
        <h2>事件 methods</h2>
        <button v-on:click="login()">登录</button>
        <button v-on:click="login2('李齐通')">登录2</button>
        <button @click="add( 18, 36 )">求任意两个数的和</button>
        <button @click="multiply( 11, 12 )">求任意两个数的积</button>
        <button @click="divide(20, 5)">求任意两个数的除法</button>
        <button @click="subtract(50, 15)">求任意两个数的减法</button>


        <hr>
        <h2>model表单输入绑定(双向绑定数据)</h2>
        <input class="input01" type="number" v-model="num1"> {{ fuhao }}
        <select v-model="fuhao">
            <option value="+" selected>+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input class="input01" type="number" v-model="num2"> =
        {{ result }}
        <button @click="add_form">计算</button>
        <p>{{ num1 }} {{ fuhao }} {{ num2 }} = {{ result }}</p>

        <hr>
        <h2>Todolist案例</h2>
        <input type="text" v-model="newBook">
        <button @click="addNewBook">添加</button>
        <ul>
            <li v-for="book in books">{{ book }}</li>
        </ul>
    </div>
    <script type="text/javascript">
        var app = new Vue(
            {
            el: '#app', //获取页面标记对象 <div id='app'></div> 
            // 页面需要的数据 
            data: {
                message: '你你你好好好 Vue!!!',
                baidu_url: 'https://www.baidu.com',
                tengxun_url:'https://www.qq.com/',
                seen:true,
                isLogin: false,
                level: 5,
                isShow: true,
                names:[ '李齐通','li', 'cao', 'qi', 'Cu', 'Ba'],
                students: [
                     { 
                        'name': 'cao',
                        'sex': '男',
                        'age': 19
                    },
                    {
                        'name': 'li',
                        'sex': '女',
                        'age': 19
                    },
                    {
                        'name': 'Ba',
                        'sex': '男',
                        'age': 19
                    },
                    {
                        'name': 'Cu',
                        'sex': '女',
                        'age': 20
                    }
            
                ],
                num1: 0,
                num2: 0,
                result: 0,
                fuhao: '+',
                books: ['学习Vue','学习Django基础','学习Django前台'],
                newBook:''
            },
            // 事件
            methods: {
                // 登录
                login: function() {
                    alert('你点击登录按钮了！');
                },
                
                // 登录2
                login2: function(name) {
                    alert(name + '点击登录2按钮了！');
                },
                
                // 任意两个数的加法
                add: function(a, b) {
                    var result = a + b;
                    alert(a + '+' + b + '=' + result);
                },
                // 任意两个数的乘法
                multiply: function(a, b) {
                    var result = a * b;
                    alert(a + '*' + b + '=' + result);
                },
                // 任意两个数的除法
                divide: function(a, b) {
                    var result = a / b;
                    alert(a + '÷' + b + '=' + result);
                },
                
                // 任意两个数的减法
                subtract: function(a, b) {
                    var result = a - b;
                    alert(a + '-' + b + '=' + result);
                },
                // 表 单 加 、 减 、 乘 、 除
                add_form: function() { 
                   // this.result = parseInt(this.num1) + this.fuhao + this.fuhao + parseInt(this.num2)
                   switch (this.fuhao) { 
                    case '+': this.result = parseInt(this.num1) + parseInt(this.num2);break;
                    case '-': this.result = this.num1 - this.num2;break;
                    case '*': this.result = this.num1 * this.num2;break;
                    case '/': this.result = this.num1 / this.num2;break;
                   }
                },
                addNewBook: function() {
                    // 把 newBook 添加 books
                   this.books.push(this.newBook);
                   this.newBook = '';
                }
            
            }   
            
        }
        )
    </script>
</body>
</html>